import React, {useEffect, useState} from 'react';
import styles from '../css/IssueItem.module.css'
import timeFormat from '../utils/timeFormat'
import {useDispatch, useSelector} from "react-redux";
import {getTypeList} from "../store/modules/typeStore";
import {Tag} from "antd";
import {getUserInfoById} from "../api/user";
import {useNavigate} from "react-router-dom";

/**
 * 每一天问答的项目
 * @param props
 * @returns {Element}
 * @constructor
 */
function IssueItem(props) {

    const {typeList} = useSelector(state => state.type)
    const dispatch = useDispatch()
    const colorArr = ["#108ee9", "#2db7f5", "#f50", "green", "#87d068", "blue", "red", "purple"];

    const [userInfo, setUserInfo] = useState({})
    useEffect(() => {
        if (!typeList.length) {
            // 派发 action 发送请求 修改 store
            dispatch(getTypeList())
        }

        async function fetchUserData() {
           const res =  await getUserInfoById()
           setUserInfo(res.data.data)
        }
        fetchUserData()
    }, []);
    const type = typeList.find(item => item._id === props.issueInfo.typeId)
    const navigate = useNavigate()
    return (
        <div className={styles.container}>
            {/*回答数*/}
            <div className={styles.issueNumber}>
                <div style={{marginTop: 10}}>{props.issueInfo.commentNumber}</div>
                <div style={{marginTop: 10}}>回答</div>
            </div>
            {/*浏览数*/}
            <div className={styles.issueNumber}>
                <div style={{marginTop: 10}}>{props.issueInfo.scanNumber}</div>
                <div style={{marginTop: 10}}>浏览</div>
            </div>
            {/*问题内容*/}
            <div className={styles.issueContainer}>
                {/*问答标题*/}
                <div className={styles.top} onClick={() => navigate(`/issues/${props.issueInfo.id}`)}>{props.issueInfo.issueTitle}</div>
                <div className={styles.bottom}>
                    <div className={styles.left}>
                        <Tag color={colorArr[typeList?.indexOf(type) % colorArr.length]}>{type?.typeName}</Tag>
                    </div>
                    <div className={styles.right}>
                        <Tag color="volcano">{userInfo.nickname}</Tag>
                        <span>{timeFormat(Number(props.issueInfo.issueDate))}</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default IssueItem;